<!doctype html>
<head>
  <meta charset="UTF-8">
  <title>九阴真经陈卫琴</title>
    <style>
      body {
        margin: 0;
      	background-color: black;
      }
      ul {
        list-style: none;
      }
      .nav-wrap {
        width: 1200px;
      	height: 500px;
      	margin: 100px auto 0;
      }
      .nav-wrap ul {
        display: flex;
      	justify-content: space-around;
      }
      .nav-wrap ul li {
        width: 200px;
      	height: 380px;
      	   
      }
      .nav-wrap ul li:nth-child(2n) {
        transform: translateY(40px);

      }
      .nav-wrap ul li img.before {
        position: absolute;
        transition: transform 400ms;
      	backface-visibility: hidden;
      		
      }
      .nav-wrap ul li img.after {
        position: absolute;
      	transition: transform 400ms;
      	backface-visibility: hidden;
      	transform: rotateY(-180deg);
      }
      .nav-wrap ul li:hover .before {
        transform: rotateY(-180deg);
      }
      .nav-wrap ul li:hover .after {
        transform: rotateY(0deg);
      }
    </style>
</head>
<body>
      <div class="nav-wrap">
      <ul>
        <li>
          <img class="before" src="images/1.jpg" alt="九阴真经的副本" width="200" height="380">
      	  <img class="after" src="images/6.jpg" alt="九阴真经的副本" width="200" height="380">
        </li>
        <li>
          <img class="before" src="images/2.jpg" alt="九阴真经的副本" width="200" height="380">
      	  <img class="after" src="images/7.jpg" alt="九阴真经的副本" width="200" height="380">
        </li>
        <li>
          <img class="before" src="images/3.jpg" alt="九阴真经的副本" width="200" height="380">
      	  <img class="after" src="images/8.jpg" alt="九阴真经的副本" width="200" height="380">
        </li>
        <li>
          <img class="before" src="images/4.jpg" alt="九阴真经的副本" width="200" height="380">
      	  <img class="after" src="images/9.jpg" alt="九阴真经的副本" width="200" height="380">
        </li>
        <li>
          <img class="before" src="images/5.jpg" alt="九阴真经的副本" width="200" height="380">
      	  <img class="after" src="images/10.jpg" alt="九阴真经的副本" width="200" height="380">
        </li>
        </ul>
      </div>
</body>
</html>